<template>
  <div class="pt-[20px] px-[16px] pb-[0]">

    <div class="pt-[20px] px-[18px] pb-[0]">
      <!-- 实时告警  -->
      <div class="flex  justify-between cursor-pointer">
        <div v-for="(item, index) in imageList" :key="index"
          @click="showAlarmList({ title: '告警管理', defaultSearch: { alarmType: item.type, searchType: 1, confirm: -1,systematicId:useDataDashboardTheme } })">
          <div
            :class="index == 0 ? ' bg-[url(@/assets/screenimg/timealerts.png)]' : index == 1 ? ' bg-[url(@/assets/screenimg/timealerts2.png)]' : 'bg-[url(@/assets/screenimg/timealerts3.png)]'"
            class="
          w-[92px]
          h-[104px]
           bg-no-repeat ">
            <div :class="index == 0 ? 'text-[#FF802B]' : index == 1 ? 'text-[#D6D6D6]' : 'text-[#FF4141]'" class="text-[24px]  font-medium text-center
           pt-[52px]">
              <!--              <div>{{ isNullOrEmpty( item.number > 999 ? '999+':item.number ) }}</div>-->
              {{ isNullOrEmpty(item.number > 999 ? '999+' : item.number) }}
            </div>
          </div>
          <div class="alltext text-center pt-[0px] mb-[24px]">{{ isNullOrEmpty(item.name) }}</div>
        </div>
      </div>
      <div class="h-[1px] bg-[var(--data-border-color)] mb-[10px]"></div>
    </div>
    <div class="flex">
      <div class="flex-1 flex justify-center text-[16px]  transition-all duration-300 items-center"
        v-for="(item, index) in tablist">
        <div
          class="w-[90px] h-[32px]  flex justify-center text-[16px] items-center transition-all duration-500 cursor-pointer"
          :class="isactive == item.id ? 'bgactive' : 'nobgactive'" @click="change(item.id)">{{ isNullOrEmpty(item.name
          ) }}</div>
      </div>
    </div>
    <div v-if="list.length != 0"
      class="w-[100%] pt-[16px] py-[16px] listbgc pl-[16px] h-[142px] mt-[16px] cursor-pointer"
      v-for="(item, index) in list" @click="showAlarmInfo(item)">
      <div class="flex justify-between">
        <div class="max-w-[200px]">
        <div class="text-[16px] leading-[16px] h-[16px] relative text-ellipsis line-clamp-1 break-all" style="border-bottom: 3px solid rgba(69,131,255,0.5) ; ">
          {{ isNullOrEmpty(item.deviceName) }}
          <!-- <div class="absolute bottom-[-3px] w-[100%] h-[5px] left-0 opacity-[0.5] bg-[#4583FF]"
            style="border-radius: 2px;">
          </div> -->
        </div>
        </div>
        <div class="w-[70px] h-[32px] flex justify-center text-[16px] items-center"
          :class="item.alarmType == 1 ? 'listbg1' : item.alarmType == 2 ? 'listbg2' : item.alarmType == 3 ? 'listbg3' : 'listbg'">

          {{ isNullOrEmpty(ALARMTYPES[item.alarmType]?.label ? ALARMTYPES[item.alarmType]?.label : '正常') }}
        </div>
      </div>
      <div class="flex mt-[5px] gap-[22px]">
        <div class="text-[14px] text-[#D6D6D6]">设备编号</div>
        <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.deviceId) }}</div>
      </div>
      <div class="flex mt-[16px] gap-[22px]">
        <div class="text-[14px] text-[#D6D6D6]">告警信息</div>
        <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.alarmTitle) }}</div>
      </div>
      <div class="flex mt-[16px] gap-[22px]">
        <div class="text-[14px] text-[#D6D6D6]">位置信息</div>
        <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.place) }}</div>
      </div>
    </div>
    <div v-if="list.length == 0" class=" mt-[260px]">
      <nullpng v-if="list.length == 0" />
    </div>

    <div class="h-[59px] w-[100%] absolute left-0 bottom-[17px] mx-[0px] flex justify-center items-center">
      <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
        :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getscreerealtime" size="small"
        style="color: #fff;" @current-change="getscreerealtime" :pager-count="3" />
    </div>
  </div>

</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
// import { screerealtime } from '@/api/screen/largeData'
import { showAlarmList } from '@/views/large-data-screen/utils/index'
// import { useDataDashboardThemeStore } from '@/store/modules/data-dashboard-theme'
import { showAlarmInfo } from '../../../../utils/index'

import { PAGE_LAYOUTLEFTS } from "@/constant";
import { ALARMTYPES } from "@/constant/alarm-mangenment";
import { ref } from 'vue'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { screerealtime } from '@/api/screen/largeData'
import { useDataDashboardThemeStore } from '@/store/modules/data-dashboard-theme'
import { emitter } from '@/utils/mitt'
const useDataDashboardTheme = ref()
const isactive = ref(0)
const tablist =
  [
    { name: '全部', id: 0 },
    { name: '故障', id: 2 },
    { name: '离线', id: 3 },
    { name: '报警', id: 1 },
  ]

const active = ref(1)
const list = ref([])
const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  page: 1,
  limit: 4
});

const alarmType = ref(0)

const imageList = ref([
  {
    name: '故障',
    number: 0,
    type: 2
  },
  {
    name: '离线',
    number: 0,
    type: 3
  },
  {
    name: '报警',
    number: 0,
    type: 1
  }
])
const re = (data) => {
  getscreerealtime()
}
onMounted(() => {
  emitter.on('alarmEventsUnit', re)
})
onBeforeUnmount(() => {
  emitter.off('alarmEventsUnit', re)
})
watch(() => useDataDashboardThemeStore().GET_SETTING('systematicId'), () => {

  setTimeout(() => {
    useDataDashboardTheme.value = useDataDashboardThemeStore().GET_SETTING('systematicId')
    getscreerealtime()
  }, 100)

}, { immediate: true })
const change = (id: number) => {
  isactive.value = id
  searchFrom.value.page = 1
  getscreerealtime()
}
const getTableList = () => {
  // 获取表格数据
}

const getscreerealtime = () => {
  screerealtime({
    searchType: 1, //查询类型(1 单位 2 -个体概览)
    alarmType: isactive.value,//告警类型   0全部 1.告警 2故障 3 离线
    systematicId: useDataDashboardTheme.value,//系统id
    page: searchFrom.value.page,
    limit: 4,
  }).then(res => {
    // console.log("获取到实时告警列表", res);
    list.value = res.result.alarmRealDevice.data
    tableData.total = res.result.alarmRealDevice.total


    imageList.value[0].number = res.result.alarmReal.failure
    imageList.value[1].number = res.result.alarmReal.offline
    imageList.value[2].number = res.result.alarmReal.warning
  })
}





</script>
<style lang="scss" scoped>
.bgactive {
  background: linear-gradient(180deg, #24293F, #1C4597);
  border-radius: 5px;
}

.listbg {
    background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(37, 176, 19, 1);
    border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
    background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(240, 50, 50, 1);
    border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbg2 {
    background: linear-gradient(90deg, rgba($color: #D8722F, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgba(224, 117, 46, 1);
    border-left: 2px solid rgba(224, 117, 46, 1);
}

.listbg3 {
    color: rgba(173, 173, 173, 1);
    background: linear-gradient(90deg, rgba($color: #ADADAD, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
    border-left: 2px solid rgba(173, 173, 173, 1);
}

.listbgc {
  background: rgba(41, 46, 72, .6);
  // border-radius: 4px;
  // border: 1px solid;
  border-image: linear-gradient(180deg, #4583FF, #0B3556) 10 10;
}
</style>
